<style scoped>
    .container {
        width: 100vw;
        position: relative;
    }

    .bg {
        position: absolute;
        top: 0px;
    }

    .reply {
        font-size:8vw;
        color:#f6d176;
        position: absolute;
        left:38.6vw;
        top:92.6vw;
    }

    .draw-botton {
        position: absolute;
        top: 108vw;
        left: 29.35vw;
        width: 41.3vw;
    }
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
    }
    .dail-view {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transition: all 1s cubic-bezier(.55,0,.1,1);
    }
    .slide-left-enter, .slide-right-leave-active {
        opacity: 0;
        -webkit-transform: translate(30px, 0);
        transform: translate(30px, 0);
    }
    .slide-left-leave-active, .slide-right-enter {
        opacity: 0;
        -webkit-transform: translate(-30px, 0);
        transform: translate(-30px, 0);
    }
</style>
<template>
    <div class="Finish">
        <img class="bg img-responsive" src="http://static.bestpeng.com/static/images/finish_bg.jpg" alt="">
        <div class="container">
            <div class="reply">{{reply}}</div>
            <router-link to="/Dail"><img class="draw-botton" src="http://static.bestpeng.com/static/images/finish_button.png"></router-link>
            <transition  :name="transitionName">
                <router-view class="dail-view" ></router-view>
            </transition>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'Finish',
        data () {
            return {
                reply: 0,
                transitionName: 'slide'
            }
        },
        created (){
            this.reply = localStorage.getItem('reply');
        },
        methods: {

        },
        //监听路由的路径，可以通过不同的路径去选择不同的切换效果
        watch: {
            '$route' (to, from) {
                if(to.path == '/Dail'){
                    this.transitionName = 'slide-left';
                }else{
                    this.transitionName = 'slide-right';
                }
            }
        }
    }
</script>